<template>
	<dv-border-box-2 :color="['#015c31', '#009a44']" class="lr_titles">
		<div class="item_title" v-if="title !== ''">
			<div class="arrow_left"></div>
			<span class="title_inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
			<div class="arrow_right"></div>
		</div>
		<div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
			<slot></slot>
		</div>
	</dv-border-box-2>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		title: {
			type: String,
			default: () => "",
		},
	},
	created() { },

	mounted() { },
	methods: {},
};
</script>
<style lang='scss' scoped>
$item-title-height: 45px;
$item_title_content-height: calc(100% - 45px);

.lr_titles {
	box-sizing: border-box;

	:deep(.border-box-content) {
		box-sizing: border-box;
		padding: 6px 16px 0px;
	}

	.item_title {
		height: $item-title-height;
		line-height: $item-title-height;
		width: 100%;
		color: #009a44;
		text-align: center;
		// background: linear-gradient(to right, transparent, #0f0756, transparent);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.arrow_left,
		.arrow_right {
			width: 58px;
			height: 14px;
			background-image: url("../../assets/img/titles/arrow_left.png");
		}

		.arrow_right {
			transform: rotate(180deg);
		}

		.title_inner {
			font-size: 24px;
			font-weight: 900;
			letter-spacing: 2px;
			background: linear-gradient(92deg,
					#015c31 0%,
					#009a44 48%,
					#015c31 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.item_title_content {
		height: $item_title_content-height;
	}

	.item_title_content_def {
		width: 100%;
		height: 100%;
	}
}
</style>